<template>
    <main>
      <div class="header-box" :class="{ ifChild: !isChildWindowOpen }">
        <h2 :class="{ ifChildTitle: !isChildWindowOpen }">{{title}}</h2>
        <div class="header">
        <span class="min" @click="toMin"><svg t="1723180054575" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5125" width="32" height="32">
            <path d="M512 1255.489906" p-id="5126"></path>
            <path d="M498.081951 943.76654" p-id="5127"></path>
            <path
              d="M772.963422 533.491105l-528.06716 0c-12.38297 0-22.514491-10.131521-22.514491-22.514491l0 0c0-12.38297 10.131521-22.514491 22.514491-22.514491l528.06716 0c12.38297 0 22.514491 10.131521 22.514491 22.514491l0 0C795.477913 523.359584 785.346392 533.491105 772.963422 533.491105z"
              p-id="5128"></path>
          </svg></span>
        <span v-if="isChildWindowOpen" class="max" @click="toBig"><svg t="1723180094302" class="icon" viewBox="0 0 1157 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="6128" width="32" height="32">
            <path
              d="M1086.033752 753.710082 878.220684 753.710082 878.220684 951.774989 878.220684 1021.784509 878.220684 1023.113804 808.211164 1023.113804 808.211164 1021.784509 70.895716 1021.784509 70.895716 1023.113804 0.886196 1023.113804 0.886196 1021.784509 0.886196 951.774989 0.886196 339.413241 0.886196 269.403721 70.895716 269.403721 269.403721 269.403721 269.403721 0.886196 274.277802 0.886196 339.413241 0.886196 1086.033752 0.886196 1151.612289 0.886196 1156.043271 0.886196 1156.043271 683.700563 1156.043271 753.710082 1086.033752 753.710082ZM70.895716 951.774989 808.211164 951.774989 808.211164 753.710082 808.211164 683.700563 808.211164 339.413241 70.895716 339.413241 70.895716 951.774989ZM1086.033752 70.895716 339.413241 70.895716 339.413241 269.403721 808.211164 269.403721 878.220684 269.403721 878.220684 339.413241 878.220684 683.700563 1086.033752 683.700563 1086.033752 70.895716Z"
              p-id="6129"></path>
          </svg></span>
        <span v-if="isChildWindowOpen" class="close" @click="toClose"><svg t="1723180114819" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7175" width="32" height="32">
            <path
              d="M590.7456 508.416 1016.832 934.5024 938.0864 1009.664 512 583.5776 78.7456 1024 0 941.6704l433.2544-440.4224L7.168 75.1616 85.9136 0 512 426.0864 938.0864 0 1016.832 82.3296 590.7456 508.416z"
              p-id="7176"></path>
          </svg></span>
        </div>
      </div>
    </main>
  </template>
  
  <script setup lang="ts">
  import {onMounted,ref } from 'vue'

  let title=ref('Electron线上测试')
  let isChildWindowOpen=ref(!false);
  onMounted(async () => {
    let res = await window.myApi.handleSend('open')
    console.log(res)
    if(res){
      isChildWindowOpen.value=!res;
      title.value='下载文件名称'
    }
  })
  const toMin = () => {
    window.myApi.windowMin()
  }
  const toBig = () => {
    window.myApi.windowMax()
  }
  const toClose = () => {
    window.myApi.windowClose()
  }
  </script>
  
  
  <style scoped>
  main {
    display: flex;
    flex-direction: column;
  }
  .header-box{
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgb(153,135,162), rgb(228,217,218));
  }
  .ifChild{
    background: white;
    border-bottom:2px solid rgb(214, 214, 214) ;
  }
  .ifChildTitle{
    color: #a8a8a8;
    font-size: 16px;
  }
  
  h2{
    margin-left: 10px;
    color: red;
  }
  .header {
    -webkit-app-region: no-drag;
    display: flex;
    justify-content: flex-end;
  }
  .header span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 35px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
  }
  
  .icon{
    width: 16px;
    height: 16px;
  }
  
  .min:hover {
    background-color: #ddd;
  }
  
  .max:hover {
    background-color: #ddd;
  }
  
  .close:hover {
    background-color: #f66666;
  }
  </style>
  